<template>
    <div>
        <div class="banxin">
                <div class="topleft">
                    <div class="topleftname">
                        <div>
                            <div>
                                <p class="black">雪菲啊雪菲</p>
                                <p>商品编号:54646</p>
                                <p>领域分类:美妆护肤</p>
                                <p>地区:全国</p>
                            </div>
                        </div>
                        <div>
                            <p>入驻平台 :微信公众号</p>
                            <div>
                                <p class="black">100W+</p>
                                <p>粉丝数</p>
                            </div>
                            <div>
                                <p class="black">1154W+</p>
                                <p>总阅读数</p>
                            </div>
                        </div>
                        <div>
                            <p>媒体评分: 8.7分</p>
                            <p>简介:大撒大撒大撒大大大啊顺丰到付的风格如果撒旦范德萨范德萨发</p>
                        </div>
                    </div>
                    <div class="quotation">
                        <div class="font14">参考报价 <span class="fr font12">注意事项：下单前请先联系客服确认投放时间和价格</span></div>
                        <div>
                            <p class="font12 color666">请选择你要投放的方式</p>
                            <div>头条价格: <span class="red">13500.00元</span></div>
                            <div>非头条价格: <span class="red">4500.00元</span></div>
                        </div>
                    </div>
                    <div class="addshop">
                        <div class="addshopcarbtn fl">加入购物车</div>
                        <div class="collectionBtn fl">收藏</div>
                        <div class="bottext fr color666 font12">有10人收藏</div>
                    </div>
                </div>
                <div class="topright fr">
                    <img src="/pic/tx_mr002.png" alt="">
                    <div class="kefutile">
                        <span>专属客服</span>
                    </div>
                    <div class="contact">
                        <div>客服咨询:小光 </div>
                        <div>联系QQ:1565611231</div>
                        <div>全国热线:1398484546</div>
                        <div>投诉建议:54544646</div>
                    </div>
                    <div class="contactbtn">联系客服</div>
                </div>
            <div class="mediacontent">
                <div class="contentitem">
                    <div class="itemheader">媒体数据</div>
                    <div class="numbox">
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <!-- <div class="contentitem">
                     <div class="itemheader">购买流程</div>
                </div> -->
                <div>
                    <img style="width:1200px" src="/pic/liucheng.png" alt="">
                </div>
                <div>
                    <img style="width:1200px" src="/pic/jieda.png" alt="">
                </div>
            </div>
            <div class="">
                相关推荐
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    mounted() {
        console.dir(this.$route.params)
    },
}
</script>
<style scoped>
.banxin{
    width: 1200px;
    margin: 0 auto;
}
.topleft{
    width:924px;
    height:446px;
    padding: 30px;
    display: inline-block;
    background:rgba(255,255,255,1);
    border-radius:3px;
    box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.11);
}
.topright{
    width: 264px;
    height: 446px;
    padding: 30px;
    margin-left: 6px;
    background:rgba(255,255,255,1);
    border-radius:3px;
    box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.11);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mediacontent{
    height: 806px;
    margin-top: 10px;
    background:rgba(255,255,255,1);
    border-radius:3px;
    box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.11);
}
.topleftname{
    height: 140px;
    display: flex;
    border-bottom: 1px dashed rgba(210,210,210,1);
}
.topleftname p {
    color: #666;
    font-size: 14px;
    margin: 3px 0;
}
.topleftname p.black{
    color: #242424;
    font-size: 19px;
}
.topleftname > div:nth-child(1){
    width: 340px;
    height: 102px;
    padding-left: 130px;
    border-right: 1px dashed #D2D2D2;
    background-image: url('/pic/tx_mr002.png');
    background-repeat: no-repeat;
}
.topleftname > div:nth-child(2){
    width: 275px;
    text-align: center;
    border-right: 1px dashed #D2D2D2;
    height: 102px;
}
.topleftname > div:nth-child(2)>div{
    width: 50%;
    float: left;
    margin-top: 20px;
}
.topleftname > div:nth-child(3){
    width: 240px;
    padding-left: 40px;
}
.quotation{
    height: 146px;
    margin: 30px 0;
    border-radius:3px;
}
.quotation>div:nth-child(1){
    height: 40px;
    line-height: 40px;
    background:linear-gradient(88deg,rgba(87,71,241,1) 0%,rgba(64,87,251,1) 100%);
    padding: 0 15px;
    color: #fff;
}
.quotation>div:nth-child(2){
    height: 106px;
    background-color: #F8F7FF;
    padding: 16px 14px;
}
.quotation>div:nth-child(2)>div{
    padding: 10px 17px;
    border: 1px solid #888;
    float: left;
    border-radius: 3px;
    margin: 5px 20px 0 0;
}
.addshopcarbtn{
    width:134px;
    height:42px;
    background-color: #5141ED;
    line-height: 42px;
    padding-left: 46px;
    border-radius:3px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    background-image: url('/indexicon/lee_icon003.png');
    background-repeat: no-repeat;
    background-position: 20px 11px;
    margin: 0 30px; 
}
.collectionBtn{
    width: 90px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    border: 1px solid #D2D2D2;
    border-radius: 3px;
    padding-left: 25px;
    font-size: 14px;
    color: #666;
    background: 13px 11px url('/indexicon/shouc_icon01.png') no-repeat;
    cursor: pointer;
}
.bottext{
    margin-top: 30px;
}
.kefutile{
    margin-top:25px;
    border-bottom: 1px dashed #ccc;
    width: 100%;
    position: relative;
}
.kefutile span{
    position: absolute;
    left: 68px;
    top: -13px;
    background-color: #fff;
}
.contact{
    width: 100%;
    height: 180px;
    background-color: #F8F7FF;
    margin-top: 40px;
    border-radius: 3px 3px 0 0;
}
.contact>div{
    height: 45px;
    border-bottom: 1px dashed #D2D2D2;
    padding-left: 21px;
    line-height: 45px;
    color: #666;
    font-size: 14px;
}
.contactbtn{
    width:204px;
    height:42px;
    background:rgba(81,65,237,1) 42px 12px url('/indexicon/lee_icon004.png') no-repeat;
    border-radius:0px 0px 3px 3px;
    text-align: center;
    line-height: 42px;
    color: #fff;
    font-size: 14px;
}
.contentitem{
    padding: 34px 30px;
    border-bottom: 1px solid #D2D2D2;
}
.contentitem .itemheader {
    padding: 0 10px;
    font-size: 24px;
    border-left: 3px solid #5141ED;
    margin-bottom: 19px;
}
.numbox{
    display: flex;
    justify-content: space-between;
}
.numbox>div{
    width: 360px;
    height: 118px;
    float: left;
    padding: 20px;
    background-color: orange;
}
</style>
